<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M846.51 225.618H184.32c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h662.19c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm-664.576 464.22c-90.798 0-164.864-74.076-164.864-165.212 0-19.108 15.698-34.816 34.816-34.816h260.096c19.108 0 34.816 15.708 34.816 34.816 0 91.136-74.076 165.212-164.864 165.212zM58.03 530.77c3.072 65.536 57.344 118.108 123.904 118.108s120.484-52.572 123.904-118.108H58.03z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M325.294 539.648c-7.854 0-15.708-4.782-18.78-12.288l-124.58-292.178L57.344 527.36c-4.434 10.24-16.384 15.36-26.962 10.926-10.24-4.444-15.36-16.384-10.926-26.972l130.048-305.152c5.12-12.288 17.746-20.48 32.082-20.48s26.972 8.192 32.092 20.48l130.048 305.152c4.434 10.24-.348 22.528-10.926 26.972-2.048.676-4.782 1.362-7.506 1.362zM848.896 689.49c-90.798 0-164.864-74.066-164.864-164.864 0-19.108 15.698-34.816 34.816-34.816h260.096c19.118 0 34.816 15.708 34.816 34.816 0 90.798-74.066 164.864-164.864 164.864zM724.992 530.77c3.072 65.536 57.344 117.76 123.904 117.76S969.39 596.306 972.8 530.77H724.992z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M705.536 539.648a20.275 20.275 0 0 1-7.854-1.71c-10.24-4.434-15.36-16.384-10.916-26.962l130.048-305.152c5.12-12.288 17.746-20.48 32.082-20.48s26.962 8.192 32.082 20.48l130.048 305.152c4.444 10.24-.338 22.528-10.916 26.962-10.24 4.444-22.528-.338-26.972-10.916l-124.58-292.188-124.59 292.188a19.845 19.845 0 0 1-18.432 12.626zM515.41 966.318c-11.264 0-20.48-9.216-20.48-20.48v-870.4c0-11.264 9.216-20.48 20.48-20.48s20.48 9.216 20.48 20.48v870.4c0 11.264-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M679.936 968.704H350.894c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h329.042c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M637.952 933.888H392.878c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h245.074c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc7 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
